<template>
  <div class="page">
    <heads></heads>
    <div class="page-content" style="width: 100%;background-color: #fff">
      <div class="loginDiv">
        <div class="loginFrom">
          <mt-field label="用户名" disableClear :state="isName" v-model="loginName" :attr="{ maxlength: 11 }"  placeholder="输入用户名" type="tel"></mt-field>
          <mt-field label="密码" disableClear :state="isPswd"  v-model="loginPswd" :attr="{ maxlength: 18 }" placeholder="输入密码" type="password"></mt-field>
        </div>
        <div class="loginBtn">
          <mt-button @click="ischangeName">登录</mt-button>
        </div>
        <div @click='$router.push("/register")' class="register">注册</div>

      </div>
    </div>
  </div>
</template>
<script>
  import heads from '../components/header'
  import { MessageBox } from 'mint-ui';
  import api from '../axios/api'
//  import MtButton from "../../node_modules/mint-ui/packages/button/src/button";
  export default {
    data(){
      return{
        isName:'',
        isPswd:'',
        loginName:[],
        loginPswd:[],
        nameRex:/^1[3|4|5|7|8]\d{9}$/,
        pswdRex:/^[0-9A-Za-z]+$/,
        isMsg:'',

      }
    },
    created(){

    },
    methods:{
        ischangeName:function () {

            var _this=this
            //console.log(process.env.HTTP_API)
          if(!this.changeName()||!this.changePswd()){
//              console.log(this.isMsg)
              return false
//            MessageBox.alert(this.isMsg, '失败');
          }else{

              this.$http(api.login,{data:{username:this.loginName,password:this.loginPswd}})
                .then(function(res) {
                    if(res.flag==1){
                      MessageBox.alert('',{
                        message: '登录成功',
                       // title: '确认',
                      }).then(action => {
                        sessionStorage.setItem('login', true)
                        _this.$store.state.login=true;
                        _this.$router.push({path:_this.$router.go(-1)})
                      });
                    }else{
                      MessageBox.alert(res.message, '失败');
                    }
                }).catch(function(err) {
                  console.log(err);
                });

          }
        },
        changeName:function () {
          if(this.loginName==''){
            this.isName='warning';
            this.isMsg='请输入手机号'
            return false
          }else if(!(this.nameRex).test(this.loginName)){
            this.isName='error';
            this.isMsg='手机号码格式错误'
            return false
          }else{
            this.isName='success';
            return true
          }
        },
        changePswd:function () {
          if(this.loginPswd==''){
            this.isPswd='warning';
            this.isMsg='请输入密码'
            return false
          }else if(!(this.pswdRex).test(this.loginPswd)||this.loginPswd.length<6){
            this.isPswd='error'
            this.isMsg='密码:6-18位字母或数字'
            return false
          }else{
            this.isPswd='success'
            return true
          }
        }
    },
    components: {
//      MtButton,
      heads
    }

  }
</script>
<style>
  @import '../sass/pageScss/login.scss';
</style>

